<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张韧跑酷 - Chrome Dino Clone</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        
        body {
            background-color: #f7f7f7;
            font-family: 'Arial', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
            background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
        }
        
        .container {
            text-align: center;
            max-width: 600px;
            padding: 20px;
        }
        
        .game-header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        
        .score-container {
            display: flex;
            gap: 30px;
            justify-content: center;
        }
        
        .score-box {
            background-color: #333;
            color: white;
            padding: 10px 25px;
            border-radius: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            min-width: 120px;
        }
        
        #game-canvas {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 600px;
            border: 1px solid #ddd;
            image-rendering: pixelated;
        }
        
        .controls {
            margin-top: 25px;
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            text-align: center;
            width: 100%;
        }
        
        .controls h3 {
            margin-bottom: 15px;
            color: #333;
            font-size: 1.3rem;
        }
        
        .key {
            display: inline-block;
            margin: 0 10px;
            padding: 10px 15px;
            background: linear-gradient(to bottom, #5a5a5a, #333);
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 0 #222;
            font-weight: bold;
        }
        
        .instructions {
            margin-top: 15px;
            color: #666;
            font-size: 0.9rem;
            line-height: 1.6;
        }
        
        .game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.9);
            padding: 30px 50px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            z-index: 10;
            border: 3px solid #333;
        }
        
        .game-over h2 {
            font-size: 2.5rem;
            color: #e74c3c;
            margin-bottom: 15px;
        }
        
        .game-over button {
            margin-top: 20px;
            padding: 12px 35px;
            background: linear-gradient(to bottom, #2ecc71, #27ae60);
            border: none;
            border-radius: 8px;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 0 #219653;
        }
        
        .game-over button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 0 #219653;
        }
        
        .game-over button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #219653;
        }
        
        .start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 20;
        }
        
        .start-screen h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            color: #333;
            text-shadow: 2px 2px 0 #ddd;
        }
        
        .start-screen p {
            max-width: 500px;
            text-align: center;
            margin-bottom: 40px;
            line-height: 1.8;
            color: #555;
            font-size: 1.1rem;
        }
        
        .title-dino {
            font-size: 4rem;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }
        
        @media (max-width: 500px) {
            .score-box {
                padding: 8px 15px;
                font-size: 1.2rem;
                min-width: 100px;
            }
            
            .controls {
                padding: 15px;
            }
            
            .key {
                margin: 5px;
                padding: 8px 12px;
            }
            
            .game-header {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            
            .game-over {
                width: 90%;
                padding: 20px;
            }
        }
    </style>
</head>
<body>

        <audio id="bgMusic" loop>
        <source src="https://sharefs.kugou.com/202508031133/76d097bf9876d315259fd1939a3bec9f/v3/f93bf23dcbf93375c13934b71ec22927/yp/full/ap1000_us0_pi409_s4099546762.mp3"audio/mpeg>
        您的浏览器不支持音频元素。
    </audio>

    <div class="container">
        <div class="game-header">
            <h1>张韧爱跑酷</h1>
            <div class="score-container">
                <div class="score-box">
                    得分: <span id="score">0</span>
                </div>
                <div class="score-box">
                    最高分: <span id="high-score">0</span>
                </div>
            </div>
        </div>
        
        <canvas id="game-canvas" width="1000" height="600"></canvas>
        
        <div class="controls">
            <h3>控制方式</h3>
            <div>
                <span class="key">空格键</span> 或 <span class="key">↑</span> - 跳跃
            </div>
            <div class="instructions">
                按空格键开始游戏，躲避仙人掌障碍物！游戏速度会随时间增加。
            </div>
        </div>
    </div>
    
    <div class="game-over" id="game-over">
        <h2>游戏结束!</h2>
        <p>最终得分: <span id="final-score">0</span></p>
        <p>最高分: <span id="final-high-score">0</span></p>
        <button id="restart">重新开始</button>
    </div>
    
    <div class="start-screen" id="start-screen">
        <div class="title-dino">🦖</div>
        <h1>张韧游戏</h1>
        <p>狠狠踢张韧屁股让他跳过仙人掌，看看你能跑多远。</p>
        <p class="instructions">按空格键开始游戏</p>
    </div>

    <script>
        // 游戏元素定义
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const highScoreElement = document.getElementById('high-score');
        const gameOverScreen = document.getElementById('game-over');
        const finalScoreElement = document.getElementById('final-score');
        const finalHighScoreElement = document.getElementById('final-high-score');
        const restartButton = document.getElementById('restart');
        const startScreen = document.getElementById('start-screen');
        
            // 加载图片
            const dinoImg = new Image();
            dinoImg.src = 'PLAYER4.jpeg';

        // 游戏常量
        const GROUND_HEIGHT = 30;
        const GRAVITY = 1;
        const JUMP_FORCE = 20;
        const DINO_WIDTH = 120;
        const DINO_HEIGHT = 160;
        const CACTUS_WIDTH = 20;
        const MIN_CACTUS_HEIGHT = 40;
        const MAX_CACTUS_HEIGHT = 60;
        const INITIAL_SPEED = 14;
        
        // 游戏状态
        let dino = {
            x: 50,
            y: canvas.height - GROUND_HEIGHT - DINO_HEIGHT,
            width: DINO_WIDTH,
            height: DINO_HEIGHT,
            jumping: false,
            velocityY: 0
        };
        
        let game = {
            speed: INITIAL_SPEED,
            score: 0,
            highScore: localStorage.getItem('dinoHighScore') || 0,
            isRunning: false,
            obstacles: [],
            frames: 0
        };
        
        // 初始化
        function init() {
            game.speed = INITIAL_SPEED;
            game.score = 0;
            game.obstacles = [];
            game.frames = 0;
            dino.y = canvas.height - GROUND_HEIGHT - DINO_HEIGHT;
            dino.jumping = false;
            dino.velocityY = 0;
            
            updateScore();
        }
        
        // 绘制地面
        function drawGround() {
            ctx.fillStyle = '#777';
            ctx.fillRect(0, canvas.height - GROUND_HEIGHT, canvas.width, GROUND_HEIGHT);
            
            // 绘制地面纹理
            ctx.fillStyle = '#666';
            for(let i = 0; i < canvas.width; i += 30) {
                if(game.frames % 20 > 10) {
                    ctx.fillRect(i + (game.frames % 30), canvas.height - 10, 15, 5);
                } else {
                    ctx.fillRect(i, canvas.height - 5, 15, 5);
                }
            }
        }
        
        // 绘制恐龙
        function drawDino() {
ctx.drawImage(dinoImg, dino.x, dino.y + 15, dino.width, dino.height - 15);

        }
        
        // 创建障碍物
        function createObstacle() {
            const height = Math.random() * (MAX_CACTUS_HEIGHT - MIN_CACTUS_HEIGHT) + MIN_CACTUS_HEIGHT;
            const cactus = {
                x: canvas.width,
                y: canvas.height - GROUND_HEIGHT - height,
                width: CACTUS_WIDTH,
                height: height
            };
            
            game.obstacles.push(cactus);
        }
        
        // 绘制障碍物
        function drawObstacles() {
            ctx.fillStyle = '#2ecc71';
            
            game.obstacles.forEach(cactus => {
                // 绘制主要部分
                ctx.fillRect(cactus.x, cactus.y, cactus.width, cactus.height);
                
                // 添加一些刺的细节
                ctx.fillStyle = '#27ae60';
                for (let i = 0; i < 3; i++) {
                    ctx.beginPath();
                    ctx.arc(cactus.x + 5, cactus.y - (i * 5), 3, 0, Math.PI * 2);
                    ctx.fill();
                    
                    ctx.beginPath();
                    ctx.arc(cactus.x + 15, cactus.y - (i * 5), 3, 0, Math.PI * 2);
                    ctx.fill();
                }
                ctx.fillStyle = '#2ecc71';
            });
        }
        
        // 更新障碍物位置
        function updateObstacles() {
            // 移动障碍物
            game.obstacles.forEach(cactus => {
                cactus.x -= game.speed;
            });
            
            // 移除屏幕外的障碍物
            game.obstacles = game.obstacles.filter(cactus => cactus.x + cactus.width > 0);
            
            // 随机生成新障碍物
            if (game.frames % 100 === 0) {
                createObstacle();
            }
        }
        
        // 碰撞检测
        function checkCollision() {
            const playerRight = dino.x + dino.width;
            const playerBottom = dino.y + dino.height;
            
            for (let cactus of game.obstacles) {
                const cactusLeft = cactus.x;
                const cactusRight = cactus.x + cactus.width;
                const cactusTop = cactus.y;
                const cactusBottom = cactus.y + cactus.height;
                
                // AABB碰撞检测
                if (
                    dino.x < cactusRight &&
                    playerRight > cactusLeft &&
                    dino.y < cactusBottom &&
                    playerBottom > cactusTop
                ) {
                    return true;
                }
            }
            
            return false;
        }
        
        // 更新分数
        function updateScore() {
            game.score = Math.floor(game.frames / 5);
            scoreElement.textContent = game.score;
            
            if (game.score > game.highScore) {
                game.highScore = game.score;
                localStorage.setItem('dinoHighScore', game.highScore);
                highScoreElement.textContent = game.highScore;
            }
        }
        
        // 更新恐龙位置
        function updateDino() {
            if (dino.jumping) {
                dino.y += dino.velocityY;
                dino.velocityY += GRAVITY;
                
                // 检查是否落地
                if (dino.y > canvas.height - GROUND_HEIGHT - dino.height) {
                    dino.y = canvas.height - GROUND_HEIGHT - dino.height;
                    dino.jumping = false;
                    dino.velocityY = 0;
                }
            }
        }
        
        // 绘制云朵
        function drawClouds() {
            ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
            
            // 绘制几朵云
            drawCloud(100, 50);
            drawCloud(300, 70);
            drawCloud(500, 40);
            
            if (game.frames % 200 > 100) {
                drawCloud(400, 80);
            }
        }
        
        // 绘制单朵云
        function drawCloud(x, y) {
            ctx.beginPath();
            ctx.arc(x, y, 15, 0, Math.PI * 2);
            ctx.arc(x + 10, y - 10, 15, 0, Math.PI * 2);
            ctx.arc(x + 25, y, 15, 0, Math.PI * 2);
            ctx.arc(x + 10, y + 10, 15, 0, Math.PI * 2);
            ctx.fill();
        }
        
        // 绘制背景
        function drawBackground() {
            // 绘制天空
            ctx.fillStyle = '#87CEEB';
            ctx.fillRect(0, 0, canvas.width, canvas.height - GROUND_HEIGHT);
            
            // 绘制太阳
            ctx.fillStyle = '#FFD700';
            ctx.beginPath();
            ctx.arc(canvas.width - 40, 40, 20, 0, Math.PI * 2);
            ctx.fill();
        }
        
        // 游戏结束
        function gameOver() {
            game.isRunning = false;
            finalScoreElement.textContent = game.score;
            finalHighScoreElement.textContent = game.highScore;
            gameOverScreen.style.display = 'block';
        }
        
        // 主游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            if (!game.isRunning) {
                return;
            }
            
            game.frames++;
    
            // 每500帧提高游戏速度
            if (game.frames % 50 === 0) {
                game.speed += 0.5;
            }
      /*  
            // 每500帧提高游戏速度
            if (game.elapsedTimeSinceLastSpeedIncrease >= 100     ) {
                game.speed += 5;
            }
       */
            drawBackground();
            drawClouds();
            drawGround();
            drawDino();
            updateDino();
            updateObstacles();
            drawObstacles();
            updateScore();
            
            // 检测碰撞
            if (checkCollision()) {
                gameOver();

                return;
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        // 跳跃
        function jump() {
            if (!dino.jumping) {
                dino.jumping = true;
                dino.velocityY = -JUMP_FORCE;
            }
        }
        
        // 初始化分数显示
        highScoreElement.textContent = game.highScore;
        
        // 事件监听
        document.addEventListener('click', (e) => {
            // 空格键或上箭头
            if (  game.isRunning) {
                jump();
            }
            
            // 开始游戏


            if (('click') && !game.isRunning && gameOverScreen.style.display !== 'block') {
                startGame();
            }



        });
              // 事件监听
        document.addEventListener('keydown', (e) => {
            // 空格键或上箭头
            if ((e.code === 'Space' || e.code === 'ArrowUp') && game.isRunning) {
                jump();
            }
            
            // 开始游戏
            if ((e.code === 'Space' || e.code === 'ArrowUp') && !game.isRunning && gameOverScreen.style.display !== 'block') {
                startGame();


            }
        });  

        // 自动播放音乐（静音处理，需要用户交互）
        const bgMusic = document.getElementById('bgMusic');
        bgMusic.volume = 0.3;

        document.body.addEventListener('click', function() {
            if (1) {
                bgMusic.play().catch(e => console.log("自动播放音乐需要用户交互"));
            }
        }, { once: true });

        document.addEventListener('keydown', (e) => {
            if (1) {
                bgMusic.play().catch(e => console.log("自动播放音乐需要用户交互"));
            }
        }, { once: true });

        // 支持触摸设备
        canvas.addEventListener('click', () => {
            if (game.isRunning) {
                jump();
            } else if (gameOverScreen.style.display !== 'block') {
                startGame();
            }
        });
        
        // 重新开始按钮
        restartButton.addEventListener('click', () => {
            init();
            gameOverScreen.style.display = 'none';
            game.isRunning = true;
            gameLoop();

        });
        
        // 开始游戏
        function startGame() {
            init();
            startScreen.style.display = 'none';
            game.isRunning = true;
            gameLoop();
        }
        
        // 绘制初始屏幕
        ctx.fillStyle = '#f0f0f0';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        ctx.fillStyle = '#333';
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('按空格键开始游戏', canvas.width/2, canvas.height/2);
    </script>
</body>
</html>